<template>
  <el-main>
    <div class="manage_content">
      <el-row :gutter="60">
        <el-col
          :span="12"
        >
          <div class="titie">
            系统信息
          </div>
          <el-table
            :data="system"
            border
            :show-header="false"
            style="width: 100%"            
          >
            <el-table-column
              prop="title"
              align="right"
            />
            <el-table-column
              prop="value"
              label=""              
            />
          </el-table>          
        </el-col>  
        <el-col
          :span="12"
          justify="center"
        >
          <div class="titie">
            服务器实时监测
          </div>
          <div
            ref="chart"
            class="chart"                 
          />
        </el-col>
      </el-row>
      <el-row :gutter="60">
        <el-col :span="12">
          <div class="titie">
            登陆信息
          </div>
          <el-table
            :data="loginfo"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="name"
              label="用户名"      
            />
            <el-table-column
              prop="ip"
              label="登录IP"    
              min-width="100px"          
            />
            <el-table-column
              prop="state"
              label="登录状态"              
            />
            <el-table-column
              prop="date"
              label="登录时间"
              min-width="130px"
            />
          </el-table>
        </el-col>
        <el-col :span="12">
          <div class="titie">
            最新操作信息
          </div>
          <el-table
            :data="oplog"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="username"
              label="用户名"    
              width="100px"     
            />  
            <el-table-column
              prop="text"
              label="操作信息"
            />                        
            <el-table-column
              prop="date"
              label="操作时间"
              width="180px"
            />            
          </el-table>
        </el-col>
      </el-row>
    </div>
  </el-main>
</template>
<script>
  const echarts = require('echarts');
  export default {
      data() {
          return {
              oplog:[], //操作信息
              loginfo:[], //登陆信息              
              system: [
                {title:'技术支持',value:'牧星策划',key:'name'},
                {title:'服务器名',value:'',key:'hostname'},
                {title:'服务器IP',value:'',key:'ip'},
                {title:'nodeJs版本',value:'',key:'node'},
                {title:'文件目录',value:'',key:'location'},
                {title:'操作系统',value:'',key:'system'},
                // {title:'系统架构',value:'',key:'arch'},
                // {title:'CPU个数',value:'',key:'cpus'},
                {title:'开机运行时长',value:'',key:'uptime'},
                {title:'内存占用',value:'',key:'totalmem'}
              ] // 系统信息
          }
      },
      mounted () {
        //获取系统数据
        this.initData()
        //初始化图表
        this.initCharts()
      },
      methods: {
        //获取系统数据
        async initData(){
          const {data:system} = await this.$http.get('system')
          this.system.forEach((item)=>{
            item.value = system[item.key] || item.value
          })          
          const {data:loginfo} = await this.$http.get('loginfo?size=4')
          this.loginfo = loginfo
          const {data:oplog} = await this.$http.get('oplog?size=4')
          this.oplog = oplog
          console.log(system)
        },
        initCharts () {
          var myChart = echarts.init(this.$refs.chart);
          var option;
          var app = {};
          const categories = (function () {
            let now = new Date();
            let res = [];
            let len = 10;
            while (len--) {
              res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
              now = new Date(+now - 2000);
            }
            return res;
          })();
          const categories2 = (function () {
            let res = [];
            let len = 10;
            while (len--) {
              res.push(10 - len - 1);
            }
            return res;
          })();
          const data = (function () {
            let res = [];
            let len = 10;
            while (len--) {
              res.push(Math.round(Math.random() * 1000));
            }
            return res;
          })();
          const data2 = (function () {
            let res = [];
            let len = 0;
            while (len < 10) {
              res.push(+(Math.random() * 10 + 5).toFixed(1));
              len++;
            }
            return res;
          })();
          option = {
            title: {
              text: ''
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#283b56'
                }
              }
            },
            legend: {},
            toolbox: {
              show: true,
              feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
              }
            },
            dataZoom: {
              show: false,
              start: 0,
              end: 100
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: true,
                data: categories
              },
              {
                type: 'category',
                boundaryGap: true,
                data: categories2
              }
            ],
            yAxis: [
              {
                type: 'value',
                scale: true,
                name: 'Price',
                max: 30,
                min: 0,
                boundaryGap: [0.2, 0.2]
              },
              {
                type: 'value',
                scale: true,
                name: 'Order',
                max: 1200,
                min: 0,
                boundaryGap: [0.2, 0.2]
              }
            ],
            series: [
              {
                name: '服务器免费资源',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: data
              },
              {
                name: '服务器使用资源',
                type: 'line',
                data: data2
              }
            ]
          };
          app.count = 11;
          setInterval(function () {
            let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
            data.shift();
            data.push(Math.round(Math.random() * 1000));
            data2.shift();
            data2.push(+(Math.random() * 10 + 5).toFixed(1));
            categories.shift();
            categories.push(axisData);
            categories2.shift();
            categories2.push(app.count++);
            myChart.setOption({
              xAxis: [
                {
                  data: categories
                },
                {
                  data: categories2
                }
              ],
              series: [
                {
                  data: data
                },
                {
                  data: data2
                }
              ]
            });
          }, 2100);

          option && myChart.setOption(option);
        }
      }
  }
</script>
<style scoped>
    .chart {width: 100%;
    height: 385px;
    margin: auto;
    min-width: 500px;
    border: 1px solid #EBEEF5;
    padding: 50px 30px 10px;
    margin-bottom: 50px;}
    .manage_content {padding:30px 40px}
    .titie {width: 100%;border: 1px solid #EBEEF5;border-bottom: 0;line-height: 48px;font-size: 16px;padding-left: 20px;}
</style>
